<template>
  <div class="login-page">
    <div class="form-container">
      <div class="picture">
        <div class="greeting">
          <h2>Hi! 你好!<br>
            欢迎来到小铁台球厅管理界面</h2>
        </div>
        <img src="https://www.xtpool.com/img/table/footer/logo.png" alt="欢迎图片">
      </div>
      <div class="text">
        <h1>欢迎回来</h1>
        <h4>用户名：</h4>
        <el-input v-model="name" placeholder="请输入内容"></el-input>
        <h4>密码：</h4>
        <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
        <div class="remember-me">
        </div>
        <button type="submit" class="shadow-button" style="background-color: #3f8cff" @click="handleLoginHell">立即登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();

const name = ref('');
const password = ref('');
const rememberMe = ref(false);

const handleLoginHell = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:888/login', {
      name: name.value,
      password: password.value
    });

    if (response.data.code === 1) {
      showSuccessAlert('欢迎回来:' + name.value);
      // 登录成功后跳转到主页
      router.push({ path: '/Home', name: 'Home' });
    } else {
      showErrorAlert(response.data.msg);
    }
  } catch (error) {
    console.error(error);
    showErrorAlert('登录失败，请检查网络或输入的信息');
  }
};

const showSuccessAlert = (message) => {
  alert(message);
};

const showErrorAlert = (message) => {
  alert(message);
};
</script>

<style scoped>
.shadow-button {
  padding: 12px 20px;
  width: 344px;
  font-size: 16px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.shadow-button:hover {
  transform: translateY(-2px); /* 按钮有轻微浮动效果 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置高度为100视口高度 */
  width: 100vw; /* 设置宽度为100视口宽度 */
  overflow: hidden; /* 隐藏滚动条 */
  background-image: url('https://www.xtpool.com/img/table/index/banner/banner.jpg'); /* 替换为实际背景图路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 884px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景色 */
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* 隐藏滚动条 */
}

.picture {
  color: white;
  width: 400px;
  height: 600px; /* 调整为与容器相同高度 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 调整为靠上对齐 */
  align-items: flex-start; /* 调整为靠左对齐 */
  background-color: #3f8cff;
  padding: 30px;
  border-radius: 20px 0 0 20px;
}

.picture .greeting {
  text-align: left;
  width: 100%;
}

.picture h2 {
  font-size: 28px;
  margin-top: 104px; /* 调整上边距 */
}

.picture img {
  max-width: 100%;
  max-height: 100%;
  margin-top: 20px;
  border-radius: 10px; /* 添加圆角 */
}

.text {
  width: 400px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px; /* 添加左右间距，使内容更紧凑 */
}

.text h1 {
  margin: 10px 0;
  font-size: 20px;
}

.text h4 {
  margin: 10px 0;
  color: rgba(125, 133, 146, 1); /* 设置颜色 */
  text-align: left; /* 文字靠左对齐 */
}

.el-input {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* 添加边框 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 增加轻微内阴影 */
}

.remember-me {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.remember-me label {
  margin-left: 5px;
}

.btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #4caf50;
  border: none;
  cursor: pointer;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
}

.picture .greeting h2 {
  font-size: 26px;
  color: #ffffff; /* 确保文字清晰 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 添加轻微文字阴影增强对比 */
}
</style>
